<template>
  <el-card shadow="hover">
    <!--    查询条件部分-->
    <el-divider content-position="left"><span style="font-weight: bolder;font-size: 18px">查询条件</span></el-divider>
    <div>
      <el-form ref="showForm" label-position="right" label-width="100px">

        <el-row :gutter="24">
          <el-col :span="9">
            <el-form-item label="供热信息：">
              <el-input v-model="queryParma.grxx" clearable size="small" placeholder="请输入查询的供热信息" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label-width="150px"
              label="供热设备编号ID："
            >
              <el-input v-model="queryParma.sbbh" clearable size="small" placeholder="请输入查询完整的供热设备编号ID" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label-width="150px"
              label="设备供热量："
            >
              <el-input v-model="queryParma.grsbgrl" clearable size="small" placeholder="请输入查询的设备供热量" />
            </el-form-item>
          </el-col>
          <el-col :span="5" align="right">
            <el-button type="primary" :loading="searchloding" @click="getHeatingInfoListPageHandle">查询</el-button>
            <el-button @click="resetForm('showForm')">重置</el-button>
            <a style="font-size:14px; margin-left: 10px" @click="toggleSearchStatus = !toggleSearchStatus">
              <template v-if="!toggleSearchStatus">
                展开
                <i class="el-icon-arrow-down" />
              </template>
              <template v-else>
                收起
                <i class="el-icon-arrow-up" />
              </template>
            </a>
          </el-col>
        </el-row>
        <template v-if="toggleSearchStatus">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label-width="150px" label="供热设备安装状态：">
                <el-select v-model="queryParma.sbazzt" style="position: relative;left: 5px" filterable default-first-option placeholder="请选择供热设备安装状态">
                  <el-option
                    key="111"
                    label=""
                    value=""
                  />
                  <el-option
                    v-for="item in equipmentSettingFlagList"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="150px" label="供热设备阀门状态：">
                <el-select v-model="queryParma.fmzt" style="position: relative;left: 5px" filterable default-first-option placeholder="请选择供热设备阀门状态">
                  <el-option
                    key="111"
                    label=""
                    value=""
                  />
                  <el-option
                    v-for="item in valveFlagList"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="150px" label="供热设备质量状态：">
                <el-select v-model="queryParma.grzlzt" style="position: relative;left: 5px" filterable default-first-option placeholder="请选择供热设备质量状态">
                  <el-option
                    key="111"
                    label=""
                    value=""
                  />
                  <el-option
                    v-for="item in heatEquipmentStatus"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
    </div>
    <!--    查询查询部分-->
    <div>
      <el-divider content-position="left"><span style="font-weight: bolder;font-size: 18px">供热&设备信息展示</span></el-divider>
      <!--      数据操作按钮-->
      <!--      <div style="padding: 10px" align="right">
        <el-button-group>
          <el-tooltip class="item" effect="dark" content="暂未开通新增功能" placement="bottom">
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="暂未开通删除功能" placement="bottom">
            <el-button type="danger" icon="el-icon-delete" @click="handleDeleteBatch">批量删除</el-button>
          </el-tooltip>
        </el-button-group>
      </div>-->

      <el-table
        v-loading="loading"
        :data="dataSource"
        :border="true"
        align="center"
        empty-text="暂无数据"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          type="index"
          :index="indexMethod"
          fixed="left"
          label="#"
          width="50"
          align="center"
        />
        <el-table-column
          label="住户名称"
          fixed="left"
          min-width="50"
          :header-align="columnsOptions.headerAlign"
          prop="householdName"
        />
        <el-table-column
          label="住户地址"
          fixed="left"
          min-width="100"
          :header-align="columnsOptions.headerAlign"
          prop="cotyCode"
        >
          <template slot-scope="{row}">
            {{ getDictsValue(row.cotyCode) }}
          </template>
        </el-table-column>
        <el-table-column
          label="住户建筑可供热面积"
          min-width="100"
          align="right"
          :header-align="columnsOptions.headerAlign"
          prop="heatArea"
        >
          <template slot-scope="{row}">
            {{ row.heatArea }} /㎡
          </template>
        </el-table-column>
        <el-table-column
          label="供热设备ID"
          align="center"
          :header-align="columnsOptions.headerAlign"
          prop="heatEquipmentId"
        />
        <el-table-column
          label="供热设备安装状态"
          :header-align="columnsOptions.headerAlign"
          align="center"
          prop="heatEquipmentSettingFlag"
        >
          <template slot-scope="{row}">
            {{ getEquipmentSettingFlagDictsValue(row.heatEquipmentSettingFlag) }}
          </template>
        </el-table-column>
        <el-table-column
          label="供热设备阀门状态"
          :header-align="columnsOptions.headerAlign"
          align="center"
          prop="heatValveFlag"
        >
          <template slot-scope="{row}">
            {{ getValveFlagDictsValue(row.heatValveFlag) }}
          </template>
        </el-table-column>
        <el-table-column
          label="是否禁用设备"
          align="center"
          fixed="right"
          :header-align="columnsOptions.headerAlign"
          min-width="50"
          prop="valiFlag"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.valiFlag"
              active-value="1"
              inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="switchHandle(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="120"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">

            <el-popover
              placement="right"
              width="700"
              trigger="click"
            >
              <el-row :gutter="24">
                <el-col :span="9" :xs="24">
                  <el-card shadow="hover" header="设备数据">
                    <el-descriptions size="small" :column="1" colon border>
                      <el-descriptions-item label="设备编号">{{ scope.row.heatEquipmentId }}</el-descriptions-item>
                      <el-descriptions-item label="设备供热量">{{ scope.row.heatEquipmentHeatingCapacity }} GJ/㎡</el-descriptions-item>
                      <el-descriptions-item label="设备质量：">{{ getEquipmentStatusDictsValue(scope.row.heatEquipmentStatus) }}</el-descriptions-item>
                      <el-descriptions-item label="设备安装日期">{{ scope.row.heatingBeginDate }}</el-descriptions-item>
                      <el-descriptions-item label="是否禁用">{{ scope.row.valiFlag === '1' ? '启用' : '禁用' }}</el-descriptions-item>
                    </el-descriptions>
                  </el-card>
                </el-col>
                <el-col :span="15" :xs="24">
                  <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                      <div>
                        <span style="margin-right: 5px">设备状态</span>
                        <span class="refresh_Icon"><i class="el-icon-refresh" @click="refreshData" /></span>
                      </div>
                    </div>
                    <el-row :gutter="24" style="margin-top: 10px">
                      <el-col :span="6">
                        <span>阀门状态：</span>
                      </el-col>
                      <el-col :span="18">
                        <el-radio-group :value="scope.row.heatValveFlag">
                          <el-radio
                            v-for="item in valveFlagList"
                            :key="item.code"
                            :label="item.code"
                            :value="item.code"
                          >
                            <span>
                              {{ item.value }}
                            </span>
                          </el-radio>
                        </el-radio-group>
                      </el-col>
                    </el-row>
                    <el-row :gutter="24" style="margin-top: 10px">
                      <el-col :span="6">
                        <span style="height: 100px;line-height: 100px;text-align: center">供暖温度：</span>
                      </el-col>
                      <el-col :span="18">
                        <div align="center">
                          <el-progress type="dashboard" :percentage="scope.row.heatTemperature !==null?scope.row.heatTemperature:0" :format="format" :color="colors" />
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
              <el-button
                slot="reference"
                size="mini"
              >查看设备</el-button>
            </el-popover>
            <el-button
              :disabled="scope.row.valiFlag === '0'"
              style="margin-left: 10px"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <!--            <el-tooltip class="item" effect="dark" content="暂未开通删除功能" placement="left">
              <el-button
                :disabled="scope.row.valiFlag === '0'"
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </el-tooltip>-->
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="showEquipmentDetailVisible" append-to-body />
      <div align="center">
        <div style="display: inline-block;width: 60px;height:60px;line-height: 60px;text-align: center;font-size: 15px">
          <span style="text-align: center;line-height: 60px;width: 60px;height:60px;">共{{ dataTotals }}条</span>
        </div>
        <div style="display: inline-block">
          <el-pagination
            :current-page.sync="queryParma.pageIndex"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="queryParma.pageSize"
            layout="total, sizes, prev,next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <modal
      ref="modals"
      :equipment-setting-flag-list="equipmentSettingFlagList"
      :valve-flag-list="valveFlagList"
      :heat-equipment-status="heatEquipmentStatus"
      :heating-info="modifyData"
      @reflushDataHandle="getHeatingInfoListPageHandle"
    />
  </el-card>
</template>

<script>
import { dropBatchHeatingInfo, getAllHeatingInfoPageFilter, modifyOneHeatingInfo } from '@/api/ht/xqzhgl/grxxgl/grxxgl'
const { getDictsList, getDictsByType, getParentDictsList, getTreeDictsByType } = require('@/api/dicts')
const { Message } = require('element-ui')
import Modal from '@/views/ht/xqzhgl/grxxgl/components/modal'
export default {
  name: 'Index',
  components: {
    Modal
  },
  data() {
    return {
      columnsOptions: { // 表单展示
        headerAlign: 'center' // 字段lable 位置
      },
      loading: false,
      colors: [
        { color: '#e72d2d', percentage: 100 },
        { color: '#ee9d7b', percentage: 80 },
        { color: '#ecc490', percentage: 60 },
        { color: '#c9da6d', percentage: 40 },
        { color: '#6fc4d3', percentage: 20 }
      ],
      toggleSearchStatus: false, // 是否展开查询条件
      showEquipmentDetailVisible: false, // 是否展示设备详情对话框
      dataSource: [], // 部门信息列表
      dataTotals: 0, // 查询总条数
      modifyData: {}, // 待修改对象信息
      searchloding: false, // 搜索按钮加载
      queryParma: {
        pageIndex: 1,
        pageSize: 5,
        grxx: '',
        sbbh: '',
        grsbgrl: ''
      },
      equipmentSettingFlagList: [], // 设备安装状态信息列表
      valveFlagList: [], // 设备阀门状态信息列表
      heatEquipmentStatus: [], // 供热设备质量状态
      hasselectedIdArray: [], // 已经选中的部门信息ID数组
      allCotyData: [], // 获取所有字典信息列表
      Dictdata: [] // 获取二级字典信息列表
    }
  },
  mounted() {
    this.getHeatingInfoListPageHandle() // 获取供热信息列表
    this.getEquipmentSettingFlagListHandle() // 获取部门信息
    this.getValveFlagListHandle() // 获取设备阀门状态信息列表
    this.getEquipmentStatusListHandle() // 获取设备阀门状态信息列表
    this.getDictArrayListHandle()
    this.getAllDictCotyTypeDataHandle()
  },
  methods: {
    refreshData() {
      this.getHeatingInfoListPageHandle()
    },
    getEquipmentSettingFlagListHandle() {
      // 获取设备安装状态信息列表
      this.getDictsTypeList('heat_equipment_setting_flag')
    },
    getValveFlagListHandle() {
      // 获取设备阀门状态信息列表
      this.getDictsTypeList('heat_valve_flag')
    },
    getEquipmentStatusListHandle() {
      // 获取设备安装状态信息列表
      this.getDictsTypeList('heat_equipment_status')
    },
    getDictArrayListHandle() {
      this.getDictArrayList()
    },
    getAllDictCotyTypeDataHandle() {
      this.getAllDictCotyType()
    },
    async getAllDictCotyType() {
      const res = await getDictsByType('coty_type')
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.allCotyData = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async getDictArrayList() {
      const res = await getTreeDictsByType('coty_type')
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.Dictdata = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    getDictsValue(code) {
      const parentStr = getParentDictsList(this.Dictdata, code)
      const kidStr = getDictsList(this.allCotyData, code)
      const resultStr = parentStr + ' - ' + kidStr
      return resultStr
    },
    getEquipmentSettingFlagDictsValue(code) {
      return getDictsList(this.equipmentSettingFlagList, code)
    },
    getValveFlagDictsValue(code) {
      return getDictsList(this.valveFlagList, code)
    },
    getEquipmentStatusDictsValue(code) {
      return getDictsList(this.heatEquipmentStatus, code)
    },
    getHeatingInfoListPageHandle() {
      this.getHeatingInfoListPage()
    },
    async getDictsTypeList(type) {
      const res = await getDictsByType(type)
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        if (type === 'heat_equipment_setting_flag') { this.equipmentSettingFlagList = data } else if (type === 'heat_valve_flag') { this.valveFlagList = data } else { this.heatEquipmentStatus = data }
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async getHeatingInfoListPage() {
      this.loading = true
      const res = await getAllHeatingInfoPageFilter(this.queryParma)
      const data = res.data.main.dataArray
      const resp = res.data.respOutMsgHeader
      const totals = res.data.main.totalsData
      const currentPage = res.data.main.currentPage
      if (resp.respCode === 200) {
        setTimeout(() => {
          this.searchloding = false
          this.loading = false
        }, 500)
        this.dataSource = data
        this.dataTotals = totals
        this.queryParma.pageIndex = currentPage
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
        this.loading = false
      }
    },
    format(temp) {
      return temp === 90 ? '警告' : `${temp}℃`
    },
    indexMethod(index) {
      return index + 1 + (this.queryParma.pageIndex - 1) * this.queryParma.pageSize
    },
    handleAdd() {
      // this.$refs.modals.checkModelType('add') - 未开通新增功能
    },
    handleEdit(index, row) {
      // 使用父子传参方式
      this.modifyData = row
      this.$refs.modals.checkModelType('edit')
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields()
      this.queryParma = {
        pageIndex: 1,
        pageSize: 5,
        grxx: '',
        sbbh: '',
        grsbgrl: ''
      }
    },
    handleDelete(index, row) {
      const rowIdarray = []
      rowIdarray.push(row.id)
      // this.dropOneHeatingInfo(rowIdarray) - 暂不开通删除功能
    },
    handleDeleteBatch() {
      // this.dropBatchHeatingInfo() - 暂不开通删除功能
    },
    async dropOneHeatingInfo(array) {
      const res = await dropBatchHeatingInfo(array)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
        this.getHeatingInfoListPageHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async dropBatchHeatingInfo() {
      const res = await dropBatchHeatingInfo(this.hasselectedIdArray)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
        this.getHeatingInfoListPageHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    switchHandle(row) {
      this.$confirm('如果设置无效操作，将会使得该供热设备关联的绝大部分功能失效或者无法正常使用系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.modifyHeatingInfoHandle(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
        this.getHeatingInfoListPageHandle()
      })
    },
    handleSizeChange(val) {
      this.queryParma.pageSize = val
      this.getHeatingInfoListPageHandle()
    },
    handleCurrentChange(val) {
      this.queryParma.pageIndex = val
      this.getHeatingInfoListPageHandle()
    },
    handleSelectionChange(selections) {
      const rowIdArray = []
      for (const selection of selections) {
        rowIdArray.push(selection.id)
      }
      this.hasselectedIdArray = rowIdArray
    },
    modifyHeatingInfoHandle(row) {
      this.modifyHeatingInfo(row)
    },
    async modifyHeatingInfo(row) {
      const res = await modifyOneHeatingInfo(row)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    }
  }
}
</script>

<style scoped>
.refresh_Icon{
  cursor: pointer;
}
.refresh_Icon :hover{
  color: #20a0ff;
}
</style>
